<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>


    <script src="js/jquery.js" type="text/javascript"></script>





    <script>


        $(document).ready(function() {
            carouselBox();
            carouselTabs();
        });
        function carouselTabs() {
            for(i = 0; i < 4; i++) {
                $('.carousel-tabs').append('<li class="tab"></li>');
            }
        }

        function carouselBox() {
            //定义全局变量和定时器
            var i = 0;
            var timer;
            var imglength = $('.carsoul-box .ig').length;
            var index = $('.tab').index();
            index = 0;
            //设置第一张图片显示，其余隐藏
            $('.ig').eq(0).show().siblings('.ig').hide();
            //调用showTime()函数
            showTime();
            //当鼠标经过下面的tab时，触发两个事件(鼠标悬停和鼠标离开)
            $('.tab').hover(function() {
                //获取当前i的值，并显示，同时还要清除定时器
                i = $(this).index();
                Show();
                clearInterval(timer);
            }, function() {
                showTime();
            });
            //创建一个showTime函数
            function showTime() {
                //定时器
                timer = setInterval(function() {
                    //调用一个Show()函数
                    Show();
                    i++;
                    index++;
                    //当图片是最后一张的后面时，设置图片为第一张
                    if(i === imglength || index === imglength) {
                        i = 0;
                        index = 0;
                    }
                    if(i === index) {
                        $('.tab').eq(i).addClass('tab-index').siblings('.tab').removeClass('tab-index');
                    }
                }, 2000);
            }
            //创建一个Show函数
            function Show() {
                //在这里可以用其他jquery的动画
                $('.ig').eq(i).fadeIn(500).siblings('.ig').fadeOut(500);

                //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
                $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');

            }
        }




    </script>


    <link href="css/lunbo.css" rel="stylesheet" />

</head>
<body id="body_lunbo">



<div id="div_01" class="carousel-figure clearfix">
    <div class="carsoul-box clearfix">
        <a class="ig" href="#"><img src="img/l1.jpg" alt=""/></a>
        <a class="ig" href="#"><img src="img/l2.jpg"  alt=""/></a>
        <a class="ig" href="#"><img src="img/l3.jpg" alt="" /></a>
        <a class="ig" href="#"><img src="img/l6.jpg" alt="" /></a>
    </div>
    <ul class="carousel-tabs clearfix">
    </ul>
</div>




</body>


<style>



</style>

</html>
